<template>
  <div class="editInfo">
    <hmNavBar
      :title="title[type]"
      :right="inputValue ? '保存' : ''"
      @rightClick="save"
      :path="path"
    >
    </hmNavBar>
    <div class="content">
      <!-- van-field
         v-model:双向绑定
         label:标题
         slot="left-icon/button"
      -->
      <van-field
        v-if="type !== 'avatar'"
        class="field"
        v-model="inputValue"
      ></van-field>
      <van-uploader
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="del"
        v-model="uploadFile"
        :max-count="1"
        v-else
      ></van-uploader>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { auEdit, upload } from '@/api/my.js'
import { title } from 'process'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      inputValue: '',
      type: this.$route.query.type,
      uploadFile: [], // 上传文件的v-model值
      title: {
        nickname: '修改昵称',
        intro: '修改个人简介',
        avatar: '修改头像',
        position: '个人岗位'
      },
      path: '/home/myInfo'
    }
  },
  created () {
    if (this.type === 'position') {
      this.path = '/home/my'
    }
    // avatar头像无值时处理
    if (this.type === 'avatar') {
      if (this.userInfo[this.type]) {
        this.uploadFile[0] = {
          url: process.env.VUE_APP_URL + this.userInfo[this.type]
        }
      }
    } else {
      // 如果type不是avatar时才给inputValue赋值
      this.inputValue = this.userInfo[this.type]
    }
  },
  mouted () {
    // 页面数据渲染之后
    // 进入页面dom修改
  },
  methods: {
    save () {
      if (this.inputValue) {
        this.editInfo()
      }
    },
    // 调用接口保存昵称
    // 编辑用户信息
    editInfo () {
      // 对象内的Key希望是变量{[变量名]:值}
      auEdit({
        [this.type]: this.inputValue
      }).then(() => {
        // 提示一下
        this.$toast.success('修改资料成功')
        // 刷新用户信息
        this.$store.dispatch('getUserInfo')

        // this.$router.push('/home/myInfo')
        this.$router.push(this.path)
      })
    },
    // 上传前
    beforeRead (file) {
      const isImg = file.type === 'image/png'
      //size单位字节
      const limit1M = file.size / 1024 / 1024 < 1
      if (!isImg) {
        this.$toast.fail('请上传png格式图片')
      }
      if (!limit1M) {
        this.$toast.fail('请上传小于1M格式图片')
      }
      return isImg && limit1M
    },
    // 文件读取之后
    afterRead (res) {
      const _formData = new FormData()
      _formData.append('files', res.file)
      // 加上loading
      this.uploadFile[0].status = 'uploading'
      upload(_formData).then(res2 => {
        this.inputValue = res2.data.data[0].id
        this.uploadFile[0].status = 'done'
        window.console.log(res2)
      })
    },
    // 文件删除前的处理
    del () {
      // 让保存按钮消失
      this.inputValue = ''
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.editInfo {
  .content {
    padding: 18px @p15;
    text-align: center;
    .field {
      background: #f7f4f5;
      border-radius: 8px;
    }
  }
}
</style>
